<template>
	<view>
		<search-model @doSearch="handleSearch"></search-model>
		<view class="list-wrap" style="padding-bottom: 20rpx;">
			<view class="house-list">
				<view class="house-item" @click="goDetail(item._id)" v-for="item in houseList" :key="item._id">
					<image class="house-img" :src="item.imgUrl" mode=""></image>
					<view class="house-info">
						<view class="title">{{item.title}}</view>
						<view class="description">{{item.areaNum}}m² {{item.localName}} {{item.houseType}}</view>
						<view class="price"> {{item.unitPrice}}元/m²</view>
						<view class="localtype">{{item.localType}}</view>
					</view>
				</view>
			</view>
			<up-loadmore :status="status" />
		</view>
		
		<!-- <navigator open-type="navigate" url="/pagesB/chat/chat">在线咨询</navigator> -->
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	import {onPullDownRefresh, onReachBottom} from '@dcloudio/uni-app'
import searchModel from '../../components/search-model/search-model.vue';
	import {GET_HOUSE} from '@/api/house.js'
	const searchQuery = reactive({
		oneValue: ''
	})
	const pageInfo = reactive({
		pageSize: 8,
		pageNum: 1,
	})
	const status = ref('loading')
	const houseList = ref([])
	const handleSearch = (query) => {
		console.log(query)
		searchQuery.oneValue = query.oneValue
		getHouse()
		//拿到了搜索条件的值，调用接口获取列表
	}
	const isHasMore = ref(true)
	const getHouse = async () => {
		if(!isHasMore.value) {return}
		// const res = await uniCloud.callFunction({
		// 	name: 'list',
		// 	data: {
		// 		pageNum: pageInfo.pageNum,
		// 		pageSize: pageInfo.pageSize
		// 	}
		// })
		const res = await GET_HOUSE({})
		console.log(res)
		const {data, hasMore} = res.result
		uni.stopPullDownRefresh()
		isHasMore.value = hasMore
		if (!isHasMore.value) {
			status.value = 'nomore'
		}
		houseList.value = [...houseList.value, ...data]
		console.log(data)
	}
	getHouse()
	const goDetail = (id) => {
		uni.navigateTo({
			url: `/pagesB/detail/detail?id=${id}`
		})
	}
	onPullDownRefresh(() => {
		console.log('下拉刷新出发嘞')
		pageInfo.pageNum = 1
		isHasMore.value = true
		houseList.value = []
		getHouse()
	})
	onReachBottom(() => {
		pageInfo.pageNum += 1
		getHouse()
	})
</script>

<style lang="scss">
	.house-list {
		padding: 0 20rpx;
	
		.house-item {
			display: flex;
			height: 150rpx;
			width: 100%;
			margin: 20rpx 0;
	
			.house-img {
				width: 150rpx;
				height: 150rpx;
				margin-right: 20rpx;
			}
	
			.house-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
	
				.title {
					font-weight: bold;
				}
	
				.description {
					font-size: 28rpx;
					color: #aaa;
				}
	
				.price {
					font-size: 26rpx;
				}
	
				.localtype {
					display: inline;
					background: #ccc;
					font-size: 24rpx;
					border-radius: 8rpx;
					text-align: center;
					width: 80rpx;
					color: #fff;
				}
			}
		}
	}     
</style>
